<template>
  <div style="background-color: #c7c7c7;">

<sticky  :check-sticky-support="false" :offset="0">
<tab v-model="$store.state.tab">
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/all')">所有帖子</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/宿舍水塘')">宿舍水塘</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/跳蚤市场')">跳蚤市场</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/影音地带')">影音地带</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/动漫星空')">动漫星空</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/举报辟谣')">举报辟谣</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/情感驿站')">情感驿站</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/搞笑图片')">搞笑图片</tab-item>
<tab-item @on-item-click="switchTabItem" @click.native="$router.replace('/Post/幽默段子')">幽默段子</tab-item>
</tab>
</sticky>
<router-view></router-view>

<img class="reload" src="static/img/Search.png" alt="" @click="isshow=true">
<br><br><br>

<div v-transfer-dom>
<popup v-model="isshow" width="100%" position="left" should-scroll-top-on-show>
  <!-- <div class="close">
        <img src="static/img/close.png" alt="" width="30" @click="isshow=false">
  </div> -->
<group>
    <x-input placeholder="请输入搜索内容" v-model="str">
          <img slot="label" style="padding-right:10px;display:block;" src="static/img/back.png" width="24" height="24" @click="isshow=false">
          <button slot="right" class="sbtn" @click="Search()">搜索</button>
    </x-input>
</group>
<group>

</group>
<search :searchlist="searchlist"></search>
</popup>
</div>

  </div>
</template>
<script>
import search from './search'
import { TransferDom } from 'vux'
export default {
    components:{search},
    inject:['reload'],
    directives: {
    TransferDom
    },
    data () {
    return {
      str:'',
      searchlist:[],
      isshow:false
    }
    },

    methods: {
    switchTabItem (index) {
    // console.log('on-before-index-change', index)
    },
    Reload(){
      $('html,body').animate({scrollTop: '0px'}, 0);//置顶
      this.reload();
    },
    Search(){//搜索
    if (this.str=='') {
      this.$vux.toast.show({
            type: 'text',
            text: '请输入搜索内容',
            position: 'middle',
            time: '1000'
            })     
    }
    else{
        this.$vux.loading.show();
        var that = this;
        this.$http.post("http://localhost:3000/post/search",//浏览记录
        {
        searchstr:this.str
        },{emulateJSON: true})
        .then(
        (response)=>{
            this.searchlist=response.data;
            this.$vux.loading.hide();
        },
        (error)=>{
        console.log("err");
        });
    }
    }
    },
    mounted(){
    }
}
</script>

<style lang="less" scoped>
.reload{
  padding: 5px;
  border-radius: 5px;
  background-color: white;
  position: fixed;
  width: 40px;
  bottom: 70px;
  right: 15px;
}
.close{
  height: 40px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
  margin-bottom: 5px;
  padding-left: 10px;
  padding-right: 10px;
}
.sbtn{
  background-color: white; 
  color: black; 
  border: 2px solid rgb(151, 151, 151);
  border-radius: 5px;
  font-size: 12px;
  padding: 5px 10px;
}
</style>